﻿@{
	ViewData["Title"] = "SheepRescissionAdd";
	Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<br />
<button id="addRowBtn" class="layui-btn" style="background-color:red;border-radius:5px"><i class="layui-icon layui-icon-addition"></i>新增</button>
<button class="layui-btn" style="background-color:red;border-radius:5px"><i class="layui-icon layui-icon-print"></i>保存</button>
<button class="layui-btn" style="background-color:red;border-radius:5px"><i class="layui-icon layui-icon-backspace"></i>撤销</button>
<button class="layui-btn" style="background-color:red;border-radius:5px"><i class="layui-icon layui-icon-delete"></i>删除</button>

<table id="dataTable" class="layui-table">
	<thead>
		<tr>
			<th style="width:50px">序号</th>
			<th style="width:120px"><i style="color:red">*</i>种母耳号</th>
			<th style="width:200px"><i style="color:red">*</i>配种日期</th>
			<th style="width:120px">种公耳号</th>
			<th style="width:200px">妊检日期</th>
			<th style="width:200px">妊检结果</th>
			<th style="width:200px">分娩日期</th>
			<th style="width:90px">健羔数</th>
			<th style="width:130px">健羔总重</th>
			<th style="width:90px">弱羔数</th>
			<th style="width:90px">畸形数</th>
			<th style="width:90px">死胎数</th>
			<th style="width:130px">木乃伊数</th>
			<th style="width:90px">畸胎数</th>
			<th style="width:130px"><i style="color:red">*</i>当前胎次</th>
			<th style="width:130px">断奶日期</th>
			<th style="width:130px">断奶只数</th>
			<th style="width:130px">断奶窝重</th>
			<!-- add more columns as needed -->
			<th style="width:300px">操作</th>
		</tr>
	</thead>
	<tbody>
		<!-- Rows will be dynamically added here -->
	</tbody>
</table>

<script src="~/js/yuanyibo/germline/germlineadd.js?a=" + new Date()></script>

<style>
	/* 为日期输入框添加样式 */
	input[type="date"] {
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f9f9f9;
		font-size: 14px;
		color: #333;
		width: 150px;
		/* 设置一个合适的宽度 */
	}
		/* 您可以根据需要添加其他样式 */
		input[type="date"]:focus {
			border-color: #007BFF;
			outline: none;
		}

	#dataTable {
		width: 100%; /* Ensure table takes full width of its container */
		max-width: 100%; /* Restrict table width to 100% of parent container */
		overflow-x: auto; /* Enable horizontal scrolling */
	}
		/* Ensure table header cells match width of table cells in body */
		#dataTable thead th {
			white-space: nowrap; /* Prevent wrapping of header text */
		}

	/* 模拟layui的下拉框样式 */
	.select-wrapper {
		position: relative;
		display: inline-block;
		font-family: Arial, sans-serif;
		overflow: hidden;
		border: 1px solid #e6e6e6; /* 边框样式 */
		border-radius: 4px; /* 圆角 */
		background-color: #fff; /* 背景颜色 */
	}

		.select-wrapper select {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			border: none;
			padding: 8px 10px;
			font-size: 14px;
			cursor: pointer;
			width: 200px;
			background: transparent; /* 透明背景 */
		}

		.select-wrapper::after {
			content: '\25BE'; /* 下三角形符号 */
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			pointer-events: none;
		}

		/* 根据选中状态改变样式 */
		.select-wrapper select:focus + ::after {
			color: #009688; /* 选中时的颜色 */
		}

</style>



